<template>
  <a-layout class="registercontent">
    <a-form
      class="registerform"
      ref="formRef"
      :rules="rules"
      :model="registerParam"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-typography-title style="text-align: center"
        >管理员注册</a-typography-title
      >
      <a-form-item
        name="m_id"
        label="管理员账号"
        :wrapper-col="{ span: 15, offset: 4 }"
      >
        <a-input
          v-model:value="registerParam.m_id"
          placeholder="请输入子账号"
        />
      </a-form-item>
      <a-form-item
        name="m_password"
        label="管理员密码"
        :wrapper-col="{ span: 15, offset: 4 }"
      >
        <a-input-password
          v-model:value="registerParam.m_password"
          placeholder="请输入密码"
        />
      </a-form-item>
      <a-form-item
        name="m_password2"
        label="重输一次密码"
        :wrapper-col="{ span: 15, offset: 4 }"
      >
        <a-input-password
          v-model:value="registerParam.m_password2"
          placeholder="再输入密码"
        />
      </a-form-item>
      <a-form-item
        name="safe_code"
        label="安全码"
        :wrapper-col="{ span: 15, offset: 4 }"
      >
        <a-input
          v-model:value="registerParam.safe_code"
          placeholder="请输入安全码"
        />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 15, offset: 8 }">
        <a-row type="flex" justify="space-between">
          <a-button type="primary" @click="register">立即注册</a-button>
          <a-button type="primary" @click="clear">重 &nbsp; &nbsp; 置</a-button>
          <a-button type="primary" @click="goLogin">返回登录页 </a-button>
        </a-row>
      </a-form-item>
    </a-form>
  </a-layout>
</template>

<script>
import { ref, reactive, defineComponent, h } from "vue";
import { post } from "@/common";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
export default defineComponent({
  setup() {
    const formRef = ref();

    const success = (info) => {
      message.success(info);
    };
    const error = (info) => {
      message.error(info);
    };
    const router = useRouter();
    //reactive 双向绑定响应框
    const registerParam = reactive({
      m_id: "",
      m_password: "",
      m_password2: "",
      safe_code: "",
    });

    const clear = () => {
      (registerParam.m_id = ""),
        (registerParam.m_password = ""),
        (registerParam.m_password2 = ""),
        (registerParam.safe_code = "");
    };

    const rules = {
      m_id: [
        {
          required: true,
          message: "请输入管理员账号",
          trigger: "blur", // 失去焦点blur 值变化change
        },
      ],
      m_password: [
        {
          required: true,
          message: "请输入管理员密码",
          trigger: "blur",
        },
      ],
      m_password2: [
        {
          required: true,
          message: "请再输入管理员密码",
          trigger: "blur",
        },
        {
          validator: (rules, value, callback) => {
            if (registerParam.m_password != value) {
              return Promise.reject("两次密码输入不一致");// 出错
            } else {
              return Promise.resolve();
            }
          },
        },
      ],
      safe_code: [
        {
          required: true,
          message: "请再输入安全码",
          trigger: "blur",
        },
      ],
    };

    const register = () => {
      formRef.value
        .validate()
        .then(() => {
          post("/manager/mRegister", registerParam).then((res) => {
            success("注册成功！");
            // 跳转至Home路由
            goLogin();
          });
        })
        .catch((err) => {
          error("数据输入错误，请检查");
        });
    };

    const goLogin = () => {
      router.push({ path: "/m_login" });
    };

    // 一行有24列
    const labelCol = {
      span: 4,
    };
    const wrapperCol = {
      span: 14,
    };

    return {
      formRef,
      success,
      error,
      goLogin,
      router,
      registerParam,
      clear,
      rules,
      register,
      labelCol,
      wrapperCol,
    };
  },
});
</script>
<style>
.registercontent {
  display: flex;
  flex-direction: column;
  background-image: url("https://cbjpeanut.oss-cn-chengdu.aliyuncs.com/blockchainmanager/background.png");
  background-size: 100% 100%;
  background-attachment: fixed;

  width: 100%;
  height: 100%;
  min-width: 1800px;
  min-height: 1400px;

  justify-content: center;
  align-items: center;
}

.registerform {
  opacity: 0.95;
  background-color: #fff;
  min-width: 600px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 30px;
  padding: 30px 20px;
}
</style>